<template>
  <div class="home">
    首页
    <!-- 展示全局的状态数据 count -->
    <!-- <p>store中的count: {{ $store.state.count }}</p>
    <p>store中的gettes:{{ $store.getters.doubleCount }}</p>
    <p>
      <button @click="addCountFn">同步count+1</button>
      <button @click="addCountStepFn">同步count+10</button>
      <button @click="addCountAsyncFn">异步count++</button>
      <button @click="addCountAsyncStepFn">异步count+10</button>
    </p> -->

    <!-- 动态组件切换 -->
    <!-- <label><input type="radio" v-model="current" value="One" /> A</label>
    <label><input type="radio" v-model="current" value="Two" /> B</label>
    <hr />
    <KeepAlive :exclude="['one1']">
      <component :is="current"></component>
    </KeepAlive> -->
    <!-- <input type="text" /> -->


  </div>
</template>
<script>

// 引入两个局部组件
import One from '../components/one.vue'
import Two from '../components/two.vue'
export default {
  name: 'home',
  data() {
    return {
      msg: '哈哈哈哈',
      current: 'One'
    }
  },
  created() {
    console.log('home=created');
    // console.log(this.$route);
  },
  mounted() {
    // console.log('home', this.$store);
  },
  components: {
    One,
    Two
  },
  methods: {
    addCountFn() {
      // 调用同步store中的mutation方法 addCount
      this.$store.commit('addCount')
    },
    addCountStepFn() {
      this.$store.commit('addCountStep', 10)
    },
    addCountAsyncFn() {
      this.$store.dispatch('addCountAsync')
    },
    addCountAsyncStepFn() {
      this.$store.dispatch('addCountAsyncStep', 10)
    }
  }

}
</script>
<style scoped>
.home {
  width: 100%;
  height: 100%;
  background-color: yellow;
}
</style>
